<script setup>
import {ref, watch} from "vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: true
  },
  text: {
    type: [String, Number],
    default: ''
  },
  // throttle: {
  //   type: Object,
  //   default: () => {
  //     return {
  //       leading: 500,
  //       trailing: 500,
  //       initVal: true
  //     }
  //   }
  // },
  style: {
    type: Object,
    default: () => {
      return {
        width: '80%',
        borderRadius: '4px'
      }
    }
  }
});

const loading = ref(props.loading);
// const throttle = ref(props.throttle);
const text = ref(props.text);
const style = ref(props.style);

// 监听loading
watch(() => props.loading, (val) => {
  loading.value = val;
});
watch(() => props.text, (val) => {
  text.value = val;
});
</script>

<template>
  <el-skeleton :style="style" :loading="loading" animated>
    <template #template>
      <el-skeleton-item variant="text" :style="style"/>
    </template>
    <template #default>
      <div>{{ text }}</div>
    </template>
  </el-skeleton>
</template>

<style scoped>

</style>